<template>
    <div class="container">
        <div class="head">
            <div class="left">
                流量控制 > IDC流量 > IDC流量趋势
            </div>
            <div class="right">
                <div class="demo-date-picker">
                    <div class="block" style="font-size:medium ; color: #1665dc; text-align: center; margin-top: 5px;">
                        <el-date-picker v-model="value" type="daterange" start-placeholder="2022.01.16"
                            end-placeholder="2022.01.22" :default-time="defaultTime" :clear-icon="CircleOpen" />

                        <el-icon style="color:#1665dc;">
                            <CaretBottom />
                        </el-icon>
                    </div>
                </div>

                <div class="butt">
                    <button>
                        <el-icon>
                            <Refresh />
                        </el-icon>刷新
                    </button>
                    <button>
                        <el-icon>
                            <Download />
                        </el-icon>导出
                    </button>
                </div>
            </div>
        </div>
        <div class="body" style="background-color:#fff">
            <div class="flow-graph">
                <div class="title">IDC出口流量</div>
                <div class="graph">
                    <datapicker></datapicker>
                    <!-- <div class="title-two">
                    <button style="background-color;:blue"></button>
                    <span>入流量</span>
                    <button></button>
                    <span>出流量</span>
                </div> -->
                </div>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{
                background: '#e5e5e5',
                color: '#000000',
                fontSize: '14px',
                font: 'center',
            
            }">

                <el-table-column prop="date" label="日期" width="180" :cell-style="cellStyle" align="center">
                </el-table-column>

                <el-table-column prop="all" label="总流量(Mbps)" align="right" />
                <el-table-column prop="in" label="入流量(Mbps)" align="right" />
                <el-table-column prop="out" label="出流量(Mbps)" align="right" />
            </el-table>
        </div>
        <div class="footer">
            <div class="left">
                <text style="margin-left:20px;">总条数：7</text>
                <text style="margin-left:20px;">总页数：1</text>
            </div>
            <div class="number">
                <text>上一页</text>
                <el-button type="primary" style=" width:5px; height:20px;">1</el-button>
                <!-- <text style=" width:20px;border:1px solid grey;" placeholder="{{message}}">{{ message }} -->
                <!-- </text> -->
                <text>下一页</text>
                <div class="jump">
                    跳至 <input v-model="message" style="width: 50px; height: 20px;" /> 页
                    <text style="color:#1665dc; border-bottom: solid blue ;" @click="goJump">确定</text>

                </div>
                <div class="right">
                    每页
                    <el-select v-model="value" class="m-2" placeholder="10" size="small" style="width:50px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    条
                </div>

            </div>
        </div>

    </div>

    <router-view></router-view>
</template>
<script>
import datapicker from './datapicker.vue'
import table from './table.vue'
import { ref } from 'vue'
import { color } from 'echarts'



const defaultTime = ref([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

export default {
    data() {
        return {

            message: '5',
            tableData: [
                {
                    date: '2020.01.16',
                    all: '9438.56',
                    in: '4576.12',
                    out: '3978.09'
                },
                {
                    date: '2020.01.17',
                    all: '8795.39',
                    in: '3245.98',
                    out: '6545.65'
                },
                {
                    date: '2020.01.18',
                    all: '8308.7',
                    in: '4878.99',
                    out: '3976.02'
                },
                {
                    date: '2020.01.19',
                    all: '8027.61',
                    in: '2563.67',
                    out: '5981.88'
                },
                {
                    date: '2020.01.20',
                    all: '7315.25',
                    in: '1789.34',
                    out: '6536.99'
                },
                {
                    date: '2020.01.21',
                    all: '5104.01',
                    in: '2467.98',
                    out: '2121.32'
                }, {
                    date: '2020.01.22',
                    all: '4527.69',
                    in: '1213.09',
                    out: '1363.29'
                }
            ],
            value: ref(''),
            options: [
                {
                    value: '1',
                    label: '1',
                },
                {
                    value: '2',
                    label: '2',
                },
                {
                    value: '3',
                    label: '3',
                },
            ],
            tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
                let row1
                row1 = "background:#e5e5e5"
                if (rowIndex == 1) {
                    return row1
                }


            },
            // cellName({ row, column, rowIndex, columnIndex }){
            //     if(columnIndex == 1){
            //         return col1
            //     }
            // },
            // cellStyle({ row, column, rowIndex, columnIndex }) {
            //     let col
            //     col = "background-color: red;"
            //     if (column.columnIndex == 1) {
            //         return col
            //     }
            // }
        }
    },
    components: {
        datapicker, //注册组件
        table
    },
    methods: {
        goJump() {
            if (1) {
                this.$router.push({ path: '/idctwo' })
            } else {
                this.$router.push({ path: '/idcone' })
            }
            console.log('111')
            console.log(this.$router)
        }
    },



}
</script>

<style>
:deep(.el-date-editor .el-range__icon svg) {
    height: 0px;
}



.el-link {
    margin-right: 8px;
    /* border-bottom: solid blue ; */
    color: blue;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.footer .number .right {
    display: flex;
    font-size: small;
    margin-left: 60px;
}

.footer .number .jump a {
    margin-left: 20px;
}

.footer .number .jump {
    display: flex;
    font-size: small;
    margin-left: 60px;
}

.footer .number text {
    font-size: small;
    margin: 0px 20px 0px 20px;
    /* padding: 0px 0px 0px 10px; */
}

.footer .number {
    display: flex;
    flex-direction: row;
    margin: 10px 10px 10px 200px;
    /* border: 1px solid red; */
}

.footer .left {
    display: flex;
    /* padding: 0px 0px 0px 10px; */
    font-size: small;
    margin-top: 10px;

}

.footer {
    /* border-bottom: 1px solid grey; */
    /* border-left:1px solid grey ; */
    /* border-right: 1px solid grey; */
    display: flex;
    flex-direction: row;

}

.container {
    background-color: #fff;
}

.table {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

}

/* .body .graph .title-two button {
    display: flex;
    margin-left: 50px;
    background-color: blue;
} */

/* .body .graph .title-two {
    display: flex;
    flex-direction: row;
    margin-left: 450px;
    padding-left: 40px;
    width: 300px;
    font-size: 10px;
    margin-top: -40px;
} */

.body .flow-graph .title {
    margin: 20px 0px 0px 20px;
    /* border: 1px solid red; */
}

.body .graph {
    display: flex;
    flex-direction: column;
    /* border: 1px solid blue; */

}


.body .flow-graph {
    display: flex;
    flex-direction: column;
    /* width: 1200px; */
    /* height: 50px; */
    /* border: 1px solid green; */
    /* margin-top: 10px; */
}

.body {
    display: flex;
    flex-direction: column;
    /* border: 1px solid grey; */
    padding-bottom: 0px;
}

.head {
    display: flex;
    /* flex-direction: row; */
    width: 1200px;
    height: 50px;
    /* border: 1px solid grey; */
    justify-content: space-between;
    margin-bottom: 30px;
    background-color: #fff;
}

.head .left {
    display: flex;
    /* border: 1px solid green; */
    margin: 10px;
    padding-left: 10px;

}

.head .right {
    display: flex;
    width: 600px;
    /* border: 1px solid blue; */

}

.head .right .data {
    display: flex;

    width: 400px;
    border: 1px solid black;
    display: flex;
    text-align: center;
    margin: 10px;

}

.head .right .data .title {
    display: flex;

    margin-right: 50px;
    padding-left: 100px;


}

.head .right .butt {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin: 10px;

}

.head .right .butt button {
    background: #fff;
    margin-left: 30px;
    color: #1665dc;
    border: 1px solid black;
}
</style>